<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/gsap/3.6.0/gsap.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
  <style>
    /* #draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
    #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; } */
    #box{
      background: url(./img/bg.png) no-repeat;
      background-size: cover;
      width: 600px;
      height: 300px;
    }
    #droppable{
      /* border: 1px solid red; */
      width: 120px;
    position: absolute;
    left: 276px;
    top: 126px;
    height: 114px;
    }
    #draggable2{
      /* border: 1px solid red; */
      width: 128px;
      height: 110px;
      left: 418px;
    top: -213px;
    
    }
    #draggable2 img{
      position: absolute;
      bottom: 0;
    }
    .donghua{
      animation: animate 1.5s infinite;
    }
    @keyframes animate {
      0%,100%{transform: translateY(0);}
      50%{transform: translateY(-15px);}
    }
    </style>
</head>

<body>
  <div id="box">
    <div id="droppable"></div>
  </div>
  <div id="draggable2" class="ui-widget-content donghua">
    <!-- <p>当未被放置在目标上时还原</p> -->
    <img src="./img/z.png" alt="">
  </div>
  <!-- <div id="droppable" class="ui-widget-header">
    <p>请放置在这里</p>
  </div> -->
  <script>
    $(function() {
      let drop = false
      $( "#draggable2" ).draggable({ revert: "invalid" });
   
      $( "#droppable" ).droppable({
        tolerance: "intersect",
        activeClass: "ui-state-default",
        hoverClass: "ui-state-hover",
        activate: function( event, ui ) {
          $(ui.draggable[0]).removeClass('donghua')
        },
        deactivate: function( event, ui ) {
          if(drop) return
          $(ui.draggable[0]).addClass('donghua')
        },
        drop: function( event, ui ) {
          drop = true
          console.log(ui.draggable);
          $( this ).addClass( "ui-state-highlight" )
          $(ui.draggable[0]).removeClass('donghua')
          // TweenMax.to(ui.draggable[0],1,{left:'264px',top:'-215px',onComplete:()=>{
          //   TweenMax.to(ui.draggable[0],1,{top:'-178px'})
          // }})
          var tl = new TimelineLite();
          tl.to(ui.draggable[0],.2,{left:'264px',top:'-215px'})
          .to(ui.draggable[0], .3,{top:'-178px'})
          .to(ui.draggable[0], .3,{top:'-215px'})
          .to(ui.draggable[0], .5,{left:'418px',top:'-213px',
          onComplete:()=>{
            $(ui.draggable[0]).addClass('donghua')
            drop = false
          }
        })
            
        }
      });
    });
    </script>
</body>
</html>